CSS - Opacidade e RGBA

CSS - Opacidade é Codificação de Cores (RGBA)

Suponha que você tenha uma imagem e deseja colocar um texto sobre ela.
A maneira comum é com o próprio Photoshop mas há outros recursos para isto.
Usamos o opacity e o rgba para definir a opacidade e a cor de fundo do texto que desejamos anexar a imagem e o efeito fica bem interessante.

1-Normal, sem nenhum efeito.

Como foi definido:
     <div class="div">
      <p class="fmtTexto1">
          <img src="../imagens/familia-pelho.jpg" />
          Familia Pelho
      </p>
     </div>

Como o browser exibe:

Familia Pelho

Você pode notar que a imagem esta em cima, a mensagem em baixo e ponto final. Amador mas não feio.

2-Com opacity.

Como foi definido:
    <style>
        .fmtTexto2 {
            text-align: left;
            width: 310px;
            font-family: Arial;
            color: white;
            padding-left: 10px;
            background-color: rgba(0,0,0,0.3); /* opacity: 0.3;*/
            color: white;
            position: absolute;
        }
    </style>

      <p class="fmtTexto2">
          <img src="../imagens/familia-pelho.jpg" />
          Familia Pelho
      </p>

Como o browser exibe:

Familia Pelho

Agora diminuindo o destaque do fundo da cor fazendo com que ela pareça como fundo de uma imagem o texto e a imagem parecem fundir mas ainda se tem a impressão que a imagem esta separada do texto.

3-Com opacity e position:relative 1.

Como foi definido:
    <style>
        .div {
            width: 300px;
            height: 300px;
        }

        #container {
            display: inline-block;
            position: relative;
        }
    </style>

     <figure id="container" class="div">
      <img src="../imagens/familia-pelho.jpg" />
      <figcaption1>Família Pelho</figcaption1>
     </figure>

Como o browser exibe:

Agora realmente a mensagem esta sobre a imagem sem sombra de dúvida. Só o fundo da mensagem tá muito translucido.

4-Adicionando uma cor de fundo ao texto.

Com opacity e position:absolute(rgba(0,50,50,0.9)).
O padrao de cores RGBA é utilizado para dar um tom de cinza ao fundo do texto.

Como foi definido:
    <style>
       #container figcaption2 {
            width: 300px;
            position: absolute;
            top: 192px;
            left: 1px;
            font-size: 30px;
            text-shadow: 0px 0px 5px black;
            opacity: 0.8;
            color: white;
            color: rgba(255,255,255, 0.8); /* branco com 80% de opacidade */
            background-color: black;
            background-color: rgba(0,50,50,0.9);
            color: white;
        }
    </style>

     <figure id="container" class="div">
      <img src="../imagens/familia-pelho.jpg" />
      <figcaption2>Família Pelho</figcaption2>
     </figure>

Como o browser exibe:

Agora ficou perfeito, um efeito digno do Photoshop, certo?